<template>
    <view class="content">
        <map style="width: 750rpx; height: 800rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"
            scale="14" :show-location="true" ></map>
        <view class="wrapper">
            <view class="nav">
                <scroll-view scroll-x>
                    <view class="nav-list">
                        <view class="nav-i" :class="{activeF : item.id == cateId}" v-for="(item, index) in navList" :key="index"
                            @click="chooseNav(item)">{{ item.name }}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="navS">
                <scroll-view scroll-x>
                    <view class="nav-list-s">
                        <view class="nav-i-s" :class="{activeS : item.id == secondId}" v-for="(item, index) in secondList" :key="index"
                            @click="chooseSecondNav(item)">{{ item.name }}</view>
                    </view>
                </scroll-view>
            </view>
            <!-- poisData -->
            <template v-if="data && data.poisData && data.poisData.length > 0">
                <view class="item" v-for="(item, index) in data.poisData" :key="index">
                    <image src="../../static/icon/add_02.png" class="add-02"></image>
                    <view class="item-r">
                        <view class="name">{{item.name}}</view>
                        <view class="item-r-d">
                            <view class="u-flex-1">{{item.address}}</view>
                            <view>距{{item.distance}}m</view>
                        </view>
                    </view>
                </view>
            </template>
            <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="data && data.poisData && data.poisData.length == 0">暂无相关信息</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                navList: [{id:1,name:'公交'},{id:2,name:'学校'},{id:3,name:'休闲'},{id:4,name:'购物'},{id:5,name:'医疗'}],
                secondList: [{id:6,name:'公交'},{id:7,name:'地铁'}],
                cateId: 1,
                secondId: 6,
                latitude: '',
                longitude: '',
                data: {},
                covers: [],
                keyword: '公交',
            };
        },
        onLoad(option) {
            console.log(option)
            this.latitude = option.latitude
            this.longitude = option.longitude
            if (option.keyword) {
                this.keyword = option.keyword
                this.cateId = option.cateId
                this.chooseNav()
            } else {
                this.getAppLocation()
            }
        },
        methods: {
            
            getAppLocation() {
                const _this = this;
                _this.$amapPlugin.getPoiAround({
                    location: `${_this.longitude},${_this.latitude}`,
                    querykeywords: _this.keyword,
                    offset: 10,
                	success: res => {
                        console.log('周边',res)
                        _this.data = res
                        let markers_new = []
                        _this.data.markers.forEach((item,index) => {
                            markers_new.push({
                                id: item.id,
                                width: item.width,
                                height: item.height,
                                // iconPath: item.iconPath,
                                iconPath: '/static/icon/add_01.png',
                                latitude: item.latitude,
                                longitude: item.longitude,
                                address: item.address,
                                name: item.name,
                                distance: _this.data.poisData[index].distance,
                                //自定义标记点上方的气泡窗口
                                label: {
                                    padding: 2,
                                    fontSize: 15,
                                    bgColor: '#199d33',
                                    color: '#ffffff',
                                    borderRadius: 5,
                                    display: 'ALWAYS',
                                    content: _this.data.poisData[index].name
                                },
                                callout: {
                                    padding: 2,
                                    fontSize: 15,
                                    bgColor: '#199d33',
                                    color: '#ffffff',
                                    borderRadius: 5,
                                    display: 'ALWAYS',
                                    content: _this.data.poisData[index].name
                                }
                            })
                        })
                        
                        let center = [{
                            id: _this.latitude, //不写会报错，随便写的 id=1
                            latitude: _this.latitude,
                            longitude: _this.longitude,
                            iconPath: '/static/icon/add_06.png',
                            width: 30,
                            height: 37,
                        }]
                        _this.covers = [...center, ...markers_new];
                        // console.log(_this.covers[0], typeof(_this.covers[0].id))
                	},
                	fail: err => {
                		console.log('失败',err)
                	}
                });
            },
            
            chooseNav(item) {
                if (item) {
                    if (this.cateId == item.id) return
                    this.cateId = item.id
                }
                this.secondList = []
                if (this.cateId == 2) {
                    this.secondId = 8
                    this.keyword = '幼儿园'
                    this.secondList = [{id:8,name:'幼儿园'},{id:9,name:'小学'},{id:10,name:'中学'}]
                } else if (this.cateId == 3) {
                    this.secondId = 11
                    this.keyword = '餐饮'
                    this.secondList = [{id:11,name:'餐饮'},{id:12,name:'景点'},{id:13,name:'娱乐'},{id:14,name:'运动'}]
                } else if (this.cateId == 4) {
                    this.secondId = 15
                    this.keyword = '购物'
                    this.secondList = [{id:15,name:'购物'},{id:16,name:'金融'}]
                } else if (this.cateId == 5) {
                    this.secondId = 17
                    this.keyword = '医院'
                    this.secondList = [{id:17,name:'医院'},{id:18,name:'药店'}]
                } else if (this.cateId == 1) {
                    this.secondId = 6
                    this.keyword = '公交'
                    this.secondList = [{id:6,name:'公交'},{id:7,name:'地铁'}]
                }
                this.getAppLocation()
            },
            
            chooseSecondNav(item) {
                if (this.secondId == item.id) return
                this.secondId = item.id
                this.keyword = item.name
                this.getAppLocation()
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #fff;
    }
    .map{
        width: 750rpx;
        height: 600rpx;
        position: relative;
        z-index: -1;
    }
    .wrapper{
        background-color: #fff;
        border-radius: 25rpx 25rpx 0 0;
        min-height: calc(100vh - 600rpx);
        padding: 20rpx 20rpx 0;
        margin-top: -20rpx;
    }
    .nav{
        width: 710rpx;
        white-space: nowrap;
    }
    .navS{
        width: 710rpx;
        padding-bottom: 15rpx;
        white-space: nowrap;
    }
    .nav-list{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 35rpx 0;
    }
    .nav-list-s{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .nav-i-s{
        padding: 13rpx 25rpx;
        background-color: #f5f5f5;
        border-radius: 50rpx;
        margin-right: 15rpx;
        font-size: 26rpx;
        box-sizing: border-box;
    }
    .activeS{
        color: #00a1e9;
        border: 2rpx solid #00a1e9;
        background-color: #effafe;
        box-sizing: border-box;
    }
    .nav-i{
        width: calc(100vw / 5);
        font-size: 30rpx;
        text-align: center;
        // padding: 0 35rpx;
        position: relative;
    }
    .activeF{
        font-size: 34rpx;
        font-weight: bold;
    }
    .activeF::after{
        content: '';
        display: block;
        width: 38rpx;
        height: 7rpx;
        background-color: #00a1e9;
        border-radius: 25%;
        position: absolute;
        bottom: -15rpx;
        left: 66rpx;
        transform: translateX(-50%);
    }
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 20rpx;
    }
    .add-02{
        width: 24rpx;
        height: 29rpx;
        margin-right: 15rpx;
        margin-top: 5rpx;
    }
    .item-r{
        flex: 1;
        border-bottom: 2rpx solid #e6e6e6;
        padding-bottom: 20rpx;
    }
    .name{
        font-size: 28rpx;
        font-weight: bold;
    }
    .item-r-d{
        font-size: 24rpx;
        color: #878787;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10rpx;
    }
</style>
